<script>
  export default {
    layout: 'admin',
    data() {
      return {
        // 附件动态配置对象
        annex: {
          annexPreVo: {
            // 主键
            id: undefined,
            // 分类
            classify: undefined
          },
          // 分组列表
          groupList: [],
          // 附件配置列表
          configList: [
            // {
            //   id: data,
            //   groupId: this.activeGroupId,
            //   configJson: {
            //     fieldList: [
            //       {
            //         // 名称
            //         name: undefined,
            //         // 编码
            //         code: undefined,
            //         // 附件类型[0-图片 1-文件 2-视频]
            //         type: undefined,
            //         // 文件后缀
            //         suffix: undefined,
            //         // 是否必填[0-是 1-否]
            //         mustStatus: undefined,
            //         // 排序等级
            //         sort: undefined,
            //       }
            //     ],
            //     conditionList: [
            //       {
            //         // 值
            //         value: undefined,
            //         // 比较方式
            //         compareMode: undefined,
            //         // 比较方式名称
            //         compareModeName: undefined,
            //         // 数值
            //         equalsNumber: undefined,
            //         // 字符串值
            //         equalsString: undefined,
            //         // 数值列表
            //         numberList: [],
            //         // 匹配字符串值
            //         containString: undefined,
            //         // 数值范围-最小值
            //         minNumber: undefined,
            //         // 数值范围-最大值
            //         maxNumber: undefined,
            //         // 时间范围-最小值
            //         minDateTime: undefined,
            //         // 时间范围-最大值
            //         maxDateTime: undefined,
            //         // 日期范围-最小值
            //         minDate: undefined,
            //         // 日期范围-最大值
            //         maxDate: undefined,
            //         // 显示的值
            //         showValue: undefined
            //       }
            //     ]
            //   },
            //   sort: undefined
            // }
          ]
        },

        // 点击的分组主键
        activeGroupId: undefined,

        // 商店管理页面检索参数
        prePageSearchForm: '',
      }
    },
    computed: {
      // 主题颜色
      themeColor() {
        return this.$store.state.settings.theme;
      },
      // 点击的分组名称
      activeGroupName() {
        const activeGroupId = this.activeGroupId;
        const group = this.getGroup(activeGroupId);
        if (!group) {
          return '';
        }
        return group.name;
      },
      // 显示的附件列表
      annexConfigList() {
        const configList = this.annex.configList;
        const activeGroupId = this.activeGroupId;
        if (!activeGroupId) {
          return [];
        }
        return configList.filter(field => field.groupId === activeGroupId);
      },
      // 显示的附件列表大小
      annexConfigListLength() {
        return this.annexConfigList.length;
      },
    },
    filters: {
      // 值映射成名称
      valueFormat(value, list) {
        for (let item of list) {
          if (item.value === value) {
            return item.name;
          }
        }
        return '';
      }
    },
    created() {
      if (process.client) {
        const params = this.$route.params;
        const id = params.id;
        // 记录上一个页面的参数
        this.prePageSearchForm = params.prePageSearchForm;
        this.annex.annexPreVo.id = id;

        if (!id) {
          this.backPrePageHandle();
          return;
        }
        // 获取配置详情
        this.getAnnex();
      }
    },
    methods: {
      /**
       * 获取附件动态配置数据方法
       */
      getAnnex() {
        this.buttonLoad = true;
        this.$axios.$get('/annex/get', { params: { id: this.annex.annexPreVo.id }})
          .then(({ data }) => {
            const annexPreDto = data.annexPreDto;

            const annex = this.annex;
            const annexPreVo = annex.annexPreVo;
            for (let propKey in annexPreVo) {
              if (annexPreDto.hasOwnProperty(propKey)) {
                annexPreVo[propKey] = annexPreDto[propKey];
              }
            }
            annex.groupList = data.annexGroupList;
            annex.configList = data.annexConfigList;

            if (annex.configList.length > 0) {
              this.activeGroupId = annex.configList[0].groupId;
            }
          })
          .catch(() => {})
          .finally(() => {
            this.buttonLoad = false;
          });
      },
      /**
       * 选择分组事件
       */
      changeGroupHandle(annexGroup) {
        if (this.activeGroupId === annexGroup.id) {
          // 点击相同分组
          return;
        }
        // 切换点击分组
        this.activeGroupId = annexGroup.id;
      },
      /**
       * 获取节点对象
       * @param id 主键
       */
      getGroup(id) {
        const queue = [...this.annex.groupList];
        while (queue.length > 0) {
          let group = queue.shift();
          if (group.id === id) {
            return group;
          }
          if (group.children && group.children.length > 0) {
            queue.push(...group.children);
          }
        }
        return undefined;
      },
      /**
       * 页面滚动事件
       * @param {string} refName 标签ref名称
       */
      scrollHandle(refName) {
        const targetDiv = this.$refs[refName][0].$el;
        let contentBoxDiv = this.$refs.contentBox.$el;
        // 获取元素距离顶部距离
        let top = targetDiv.offsetTop - contentBoxDiv.offsetTop - 90;
        // 滚动到指定div
        this.$refs.contentBox.$el.scrollTo({
          top: top,
          behavior: "smooth",
        });
      },
      /**
       * 返回商店管理页事件
       */
      backPrePageHandle() {
        // 跳回管理页面
        this.$router.replace({ name: 'admin-annex', params: { searchForm: this.prePageSearchForm }});
      },
    }
  }
</script>

<template>
  <div class="view-page">
    <el-row :gutter="15">
      <el-col :span="5">
        <el-card :body-style="{ padding: '10px' }" shadow="hover" class="left-box">
          <el-tree
            :data="annex.groupList"
            node-key="id"
            :expand-on-click-node="false"
            default-expand-all
          >
            <div slot-scope="{ node, data }" style="width: 100%" class="node-box">
              <span @click="changeGroupHandle(data)" class="el-tree-node__label">{{ data.name }}</span>
              <span v-if="data.children && data.children.length > 0" class="el-tree-node__label children-count">
                ({{ data.children.length }})
              </span>
            </div>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="19" ref="contentBox" class="config-box">
        <el-card :body-style="{ padding: '10px' }" shadow="never" class="opt-box">
          <div class="save-btn">
            <el-button type="info" size="mini" plain @click="backPrePageHandle">
              返回
            </el-button>
          </div>
          <div class="tag-box">
            <el-tag
              v-if="!!activeGroupName"
              size="medium"
              disable-transitions
              effect="plain"
              class="config-num"
            >
              {{ activeGroupName }}
            </el-tag>
            <el-tag
              v-for="num in annexConfigListLength"
              :key="'tag' + num"
              size="medium"
              disable-transitions
              @click="scrollHandle('annexConfig' + num)"
              class="config-num"
            >
              {{ num }}
            </el-tag>
          </div>
        </el-card>
        <el-card v-for="(annexConfig, index) in annexConfigList" :key="'annexConfig' + index"
                 :ref="'annexConfig' + (index + 1)"
                 :body-style="{ padding: '10px' }"
                 shadow="never" class="field-box">
          <div class="field-tag">
            <el-tag class="tag">{{ index + 1 }}</el-tag>
          </div>
          <div class="field-title">
            附件
          </div>
          <el-table
            :data="annexConfig.configJson.fieldList"
            class="field-table"
          >
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="code" label="编码"></el-table-column>
            <el-table-column prop="typeName" label="类型"></el-table-column>
            <el-table-column prop="suffix" label="后缀"></el-table-column>
            <el-table-column prop="mustStatus" label="是否必填">
              <template v-slot="{ row }">
                {{ row.mustStatus === 0 ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="sort" label="序号"></el-table-column>
          </el-table>
          <div class="field-title">
            条件
          </div>
          <el-table
            :data="annexConfig.configJson.conditionList"
            class="condition-table"
          >
            <el-table-column prop="valueName" label="字段"></el-table-column>
            <el-table-column prop="compareModeName" label="计算模式"></el-table-column>
            <el-table-column prop="showValue" label="值"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
  .view-page .left-box {
    height: calc(100vh - 132px);
    overflow-y: auto;
  }
  .view-page .config-box {
    height: calc(100vh - 132px);
    overflow-y: auto;
    position: relative;
  }
  .view-page .config-box .opt-box {
    margin-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .view-page .config-box .opt-box .save-btn {
    margin-bottom: 7px;
  }
  .view-page .config-box .opt-box .tag-box {
    line-height: 35px;
  }
  .view-page .config-box .opt-box .tag-box .config-num {
    font-size: 14px;
    margin-right: 18px;
    cursor: pointer;
  }
  .view-page .config-box .field-box {
    margin-top: 10px;
  }
  .view-page .config-box .field-box .field-tag {
    width: 100%;
    margin-bottom: 10px;
  }
  .view-page .config-box .field-box .field-tag .tag {
    width: 50px;
    text-align: center;
    font-size: 15px;
  }
  .view-page .config-box .field-box .field-title {
    padding-left: 5px;
    margin-bottom: 10px;
    font-size: 15px;
    height: 35px;
    line-height: 35px;
    background-color: #F2F6FC;
    border-radius: 3px;
  }
  .view-page .config-box .field-box .field-table,
  .view-page .config-box .field-box .condition-table {
    margin-bottom: 10px;
  }

  .view-page >>> .el-tree .el-tree-node {
    white-space: normal;
  }
  .view-page >>> .el-tree .el-tree-node .el-tree-node__content {
    height: 100%;
    line-height: 22px;
    align-items: start;
  }
  .view-page >>> .children-count {
    color: #67C23A;
  }
</style>


